<template>
  <div :height="WindowHeight">
    <div class="block">
      <el-carousel trigger="click" :height="WindowHeight">
        <el-carousel-item v-for="(items,key) in item" :key="key">

          <el-image
              style="width: 100%; height: 100%"
              :src="items.url"
              fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>

export default {
  name: 'StaticHome',
  data() {
    return {
      item: [
        {
          url: 'http://www.ai-god.com:8081/static/Thumbnail/1.jpg'
        },
        {
          url: 'http://www.ai-god.com:8081/static/Thumbnail/2.jpg'
        },
        {
          url: 'http://www.ai-god.com:8081/static/Thumbnail/3.jpg'
        },
        {
          url: 'http://www.ai-god.com:8081/static/Thumbnail/4.jpg'
        }
      ],
      WindowHeight: ''
    }
  },
  methods: {
    getHeight() {
      this.WindowHeight = window.innerHeight + 'px'; //获取浏览器高度
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight() //页面加载时执行getHeight函数
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight); //页面关闭时销毁getHeight函数
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

#poster {
  background-color: #2c3e50;
  width: 100%;
  height: 100%;
  margin: 0;

}
body {
  margin: 0px;
}

</style>
